<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/weibo.css" />
	</head>
	<body>
		<button id="btn_fb">发布微博</button>
		<div id="modal">
			<div id="wb">
				<div id="banner">
					<h5>你好，发布微博</h5>
					<div id="closed"><img src="img/img.jpg" /> </div>
				</div>
				<p>请输入您想发表的文字</p>
				<textarea id="content" maxlength="150"></textarea>
				<button id="btn_enter">确定</button>
				<button id="btn_cancel">取消</button>
			</div>
		</div>
		<script type="text/javascript" src="js/tools.js" ></script>
		<script>
			$("#btn_fb").onclick = function(){
				$("#modal").style.display = "block";
				$("#content").value="";
				
			}
			$("#closed").onclick = function(){
				$("#modal").style.display = "none";
			}
			$("#btn_enter").onclick = function(){
				$("#modal").style.display = "none";
			}
			$("#btn_cancel").onclick = function(){
				$("#modal").style.display = "none";
			}
			//鼠标拖拽
			$("#banner").onmousedown = function(e) {
			e = e || event;
			
			// 获取光标在 div#box 元素坐标系中的坐标
			var _offsetX = e.offsetX,
				_offsetY = e.offsetY;
				console.log(_offsetX);
				console.log(_offsetY);


			// 在文档上绑定鼠标移动事件
			
			document.onmousemove = function(e) {
				e = e || event;
				// 计算拖拽过程中元素定位位置
				var _left = e.clientX - _offsetX,
					_top = e.clientY - _offsetY;
				// 设置 CSS 属性
				$("#wb").style.left = _left + "px";
				$("#wb").style.top = _top + "px";
			}

			// 在文档上绑定鼠标弹起事件
			document.onmouseup = function() {
				document.onmousemove = null;
				document.onmouseup = null;
			}
			return false;
	}
		</script>
	</body>
</html>
